<template>
  <!-- 查看视频-->
  <component
    wd="900"
    :is="cfg.model"
    v-model:window_open="data.md_video"
    :title="`查看作业视频`"
  >
    <template #content>
      <iframe
        v-if="cfg.mobile == true"
        style="width: 98%; height: 255px"
        :src="`//player.bilibili.com/player.html?bvid=${data.video_id}&p=${data.video_fp}`"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true"
      >
      </iframe>
      <iframe
        v-if="cfg.mobile == false"
        style="width: 100%; height: 400px"
        :src="`//player.bilibili.com/player.html?bvid=${data.video_id}&p=${data.video_fp}`"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true"
      >
      </iframe>
    </template>
  </component>
  <div class="nbox1 _box_dfg">
    <!-- 筛选+分页顶 -->
    <div style="width: 100%">
      <n-scrollbar x-scrollable>
        <div class="_nav_box">
          <n-input
            :size="cfg.sizebtn"
            style="width: 150px"
            placeholder="筛选作者名称"
            @input="set.handinput"
          />
          <n-select
            :size="cfg.sizebtn"
            filterable
            placeholder="主控角色"
            style="width: 150px"
            :consistent-menu-width="false"
            v-model:value="data.zk"
            @update:value="set.get_work_list"
            :render-label="set.rolelabel"
            :options="data.rolelist"
          />
          <n-select
            :size="cfg.sizebtn"
            placeholder="筛选属性"
            style="width: 150px"
            v-model:value="data.ss"
            @update:value="set.get_work_list"
            :options="cfg.ss"
          />
          <n-select
            :size="cfg.sizebtn"
            label-field="name"
            style="width: 150px"
            value-field="name"
            placeholder="筛选首领名称"
            v-model:value="data.boss"
            @update:value="set.get_work_list"
            :options="data.bosslist"
          />
        </div>
      </n-scrollbar>
      <n-hr />

      <n-pagination
        v-if="cfg.mobile == false"
        v-model:page="data.work_page"
        :page-count="data.work_count"
        @update:page="set.up_work_page"
      />
      <n-pagination
        v-if="cfg.mobile == true"
        v-model:page="data.work_page"
        :page-count="data.work_count"
        @update:page="set.up_work_page"
        simple
      />
    </div>
    <!-- 内容 -->
    <div style="max-width: 100%">
      <n-scrollbar x-scrollable>
        <div v-if="$set.mb == true">
          <n-grid x-gap="12" y-gap="12" :cols="parseInt(cfg.sswd / 165)" class="item">
            <template v-for="item in data.work_list">
              <n-gi span="1">
                <div class="_work_sid_list">
                  <n-grid class="ngrid" :y-gap="8" :x-gap="8" :cols="2">
                    <n-gi span="2">
                      <div class="_avagap">
                        <template v-for="item2 in item.icon">
                          <img
                            :class="$set.mb == true ? `_ava_m` : `_ava`"
                            :src="cfg.function.ava(item2)"
                          />
                        </template>
                      </div>
                    </n-gi>

                    <n-gi span="1">
                      <n-statistic label="作者"> {{ item.user }}</n-statistic>
                    </n-gi>
                    <n-gi span="1">
                      <n-statistic label="数据">赞[{{ item.gj }}] </n-statistic>
                    </n-gi>
                    <n-gi span="2">
                      <n-statistic label="上传日期">
                        <n-time format="yyyy-MM-dd hh:mm" :time="item.time" unix
                      /></n-statistic>
                    </n-gi>
                    <n-gi span="2">
                      <div style="gap: 8px; display: flex; justify-content: center">
                        <n-button size="small" @click="set.workdata_video(item)"
                          >视频</n-button
                        >
                        <n-button
                          size="small"
                          v-if="cfg.qxpd(['bz']) == true"
                          @click="set.workdata_del(item)"
                          >删除</n-button
                        >
                      </div>
                    </n-gi>
                  </n-grid>
                </div>
              </n-gi>
            </template>
          </n-grid>
        </div>
        <div class="_list" v-if="$set.mb == false">
          <div class="_listbox">
            <div :style="`width:${set.tb[0].w}px`" class="_df">
              {{ set.tb[0].name }}
            </div>
            <div :style="`width:${set.tb[1].w}px`" class="_df">
              {{ set.tb[1].name }}
            </div>
            <div :style="`width:${set.tb[2].w}px`" class="_df">
              {{ set.tb[2].name }}
            </div>
            <div :style="`width:${set.tb[3].w}px`" class="_df">
              {{ set.tb[3].name }}
            </div>
            <div :style="`width:${set.tb[4].w}px`" class="_df">
              {{ set.tb[4].name }}
            </div>
            <div style="width: 155px" class="_df">操作</div>
          </div>
          <div style="display: flex; flex-direction: column; gap: 4px">
            <template v-for="item in data.work_list"
              ><div class="workdata_list">
                <div :style="`width:${set.tb[0].w}px`" class="_df">
                  {{ cfg?.bossnamelist?.[item.boss]?.bname }}
                </div>
                <div :style="`width:${set.tb[1].w}px`" class="_df">
                  <div class="_ava_df">
                    <template v-for="item2 in item.icon">
                      <img class="_ava" :src="cfg.function.ava(item2, 50)" />
                    </template>
                  </div>
                </div>
                <div :style="`width:${set.tb[2].w}px`" class="_df">
                  {{ item.user }}
                </div>
                <div :style="`width:${set.tb[3].w}px`" class="_df">
                  <n-time format="yyyy-MM-dd hh:mm" :time="item.time" unix />
                </div>
                <div :style="`width:${set.tb[4].w}px`" class="_df">赞[{{ item.gj }}]</div>
                <div class="_rolename _df" style="width: 155px">
                  <div style="gap: 8px; display: flex">
                    <n-button size="small" @click="set.workdata_video(item)"
                      >视频</n-button
                    >
                    <n-button
                      size="small"
                      v-if="cfg.qxpd(['bz']) == true"
                      @click="set.workdata_del(item)"
                      >删除</n-button
                    >
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </n-scrollbar>
    </div>
    <!-- 分页底 -->
    <div class="nbox1">
      <n-pagination
        v-if="cfg.mobile == false"
        v-model:page="data.work_page"
        :page-count="data.work_count"
        @update:page="set.up_work_page"
      />
      <n-pagination
        v-if="cfg.mobile == true"
        v-model:page="data.work_page"
        :page-count="data.work_count"
        @update:page="set.up_work_page"
        simple
      />
    </div>
  </div>
</template>
<style scoped>
._nav_box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-bottom: 8px;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.workdata_list {
  background-color: #3d4656;
  padding: 8px;
  display: flex;
  flex-direction: row;
}

._ava_df {
  display: flex;
  gap: 4px;
}
._ava {
  width: 33px;
  height: 33px;
  border-radius: 5px;
}
._listbox {
  background-color: #3a5179;
  padding: 8px;
  display: flex;
  flex-direction: row;
}
._df {
  display: flex;
  align-items: center;
  justify-content: center;
}

._list {
  gap: 4px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
</style>
<script>
import { cfg } from "@/cfg/cfg.js";
import { getrole } from "@/cfg/function.js";
import { Delete, Add } from "@vicons/carbon";

export default {
  components: {
    Delete,
    Add,
  },
  props: ["data"],
  setup(props) {
    const set = {
      rolelabel: (option) => {
        if (option.value != null) {
          return h(
            "div",
            {
              class: "select_div",
            },
            [
              h("img", {
                class: "select_ava",
                src: cfg.function.ava(option.value),
                width: 32,
              }),
              h("div", {
                //html内容
                innerHTML: option.label,
                style: {
                  marginLeft: "12px",
                  padding: "4px 0",
                },
              }),
            ]
          );
        } else {
          return h(
            "div",
            {
              style: {
                display: "flex",
                alignItems: "center",
              },
            },
            [
              h("div", {
                //html内容
                innerHTML: option.label,
                style: {
                  marginLeft: "12px",
                  padding: "4px 0",
                },
              }),
            ]
          );
        }
      },
      workdata_del: async (id) => {
        cfg.alert.warning({
          title: "警告",
          content: "确定要删除该作业吗？",
          positiveText: "删除",
          negativeText: "撤销",
          draggable: true,
          onPositiveClick: async () => {
            let res = await cfg.axios.post(
              `${cfg.url}`,
              {},
              {
                params: {
                  t: "v2/get",
                  t2: "admin/guild_work",
                  t3: "work_del",
                  authkey: cfg.user?.authkey,
                  uid: cfg.user?.uid,
                  id: id._id.$oid,
                },
              }
            );
            await set.get_work_list();
          },
          onNegativeClick: () => {},
        });
      },
      handinput: async (text) => {
        data.name = text;
        await set.get_work_list();
      },
      tb: [
        {
          w: 75,
          name: "首领",
        },
        {
          w: 165,
          name: "队伍",
        },
        {
          w: 100,
          name: "作者",
        },
        {
          w: 150,
          name: "日期",
        },
        {
          w: 200,
          name: "数据",
        },
      ],
      get_work_list: async () => {
        let res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "v2/get",
            t2: "admin/guild_work",
            t3: "get_work_list",
            page: data.work_page,
            boss: data.boss,
            name: data.name,
            ss: data.ss,
            zk: data.zk,
          },
        });
        if (res.data.code == 0) {
          const dx = res.data;
          data.work_list = dx.data;
          data.work_count = Math.ceil(dx.count / 20);
          if (data.work_page > 1 && data.work_list?.length == 0) {
            data.work_page--;
            await set.get_work_list();
          }
          return;
        } else {
          cfg.msg.error(res.data.msg);
        }
      },
      up_work_page: async (page) => {
        data.work_page = page;
        await set.get_work_list();
      },
      workdata_video: (id) => {
        data.video_id = id.bv;
        data.video_fp = id.fp ?? 0;
        data.md_video = true;
      },
    };
    const odata = props.data;
    let data = reactive({
      work_count: 0,
      work_list: [],
      rolelist: [
        {
          label: "〔撤销选择主控角色〕",
          value: null,
        },
      ],
      video_id: 0,
      video_fp: 0,
      work_page: 1,
      md_video: false,
      boss: null,
      name: null,
      ss: null,
    });

    onMounted(async () => {
      await getrole();
      await set.get_work_list();
      const role = cfg.role;
      for (let index = 0; index < role.length; index++) {
        const item = role[index];
        data.rolelist.push({
          label: item.name + " -> " + item.bname,
          value: item.icon,
        });
      }
      data.bosslist = odata.bosslist;
    });
    return { odata, data, cfg, set };
  },
};
</script>
